<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Terminal</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: monospace;
      background-color: #1e1e1e;
      color: #ecf0f1;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .header {
      padding: 10px;
      background-color: #2c3e50;
      border-bottom: 1px solid #7f8c8d;
    }
    .header h1 {
      font-size: 18px;
      text-align: center;
    }
    .status-bar {
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;
      background-color: #34495e;
      font-size: 12px;
    }
    #terminal-container {
      flex: 1;
      padding: 10px;
      overflow: hidden;
      position: relative;
    }
    #terminal-canvas {
      display: block;
      background-color: #000000;
    }
    .footer {
      padding: 5px 10px;
      text-align: center;
      font-size: 12px;
      color: #95a5a6;
      background-color: #2c3e50;
    }
    .connection-status {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .connected {
      background-color: #2ecc71;
    }
    .disconnected {
      background-color: #e74c3c;
    }
    .connecting {
      background-color: #f39c12;
    }
    /* 隐藏的文本输入区域，用于捕获键盘输入 */
    #terminal-input {
      position: absolute;
      left: -1000px;
      width: 1px;
      height: 1px;
      opacity: 0;
    }
  </style>
</head>
<body>
<div class="header">
  <h1>Canvas Terminal</h1>
</div>
<div class="status-bar">
  <div id="status">
    <span class="connection-status disconnected" id="status-indicator"></span>
    <span id="status-text">未连接</span>
  </div>
  <div id="terminal-size">列: 80, 行: 24</div>
</div>
<div id="terminal-container">
  <canvas id="terminal-canvas"></canvas>
  <textarea id="terminal-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
</div>
<div class="footer">
  Powered by Go + Gin + Canvas | 使用 ↑ ↓ 键查看历史命令 | Ctrl+C 中断当前命令
</div>

<!-- 调试面板 -->
<div id="debug-panel">
  <div class="debug-control">
    <label for="width-factor">宽度系数:</label>
    <input type="number" id="width-factor" value="1.5" step="0.1" min="1.0" max="3.0">
  </div>
  <div class="debug-control">
    <label for="font-size">字体大小:</label>
    <input type="number" id="font-size" value="14" min="8" max="32">
  </div>
  <button id="apply-debug">应用设置</button>
</div>

<!-- 引入终端相关JS文件 -->
<script src="/static/ansi-parser.js"></script>
<script src="/static/canvas-terminal.js"></script>
<script src="/static/main.js"></script>

<script>
  document.getElementById('apply-debug').addEventListener('click', function() {
    const widthFactor = parseFloat(document.getElementById('width-factor').value);
    const fontSize = parseInt(document.getElementById('font-size').value);
    
    if (window.term) {
      term.options.fontSize = fontSize;
      term.options.widthFactor = widthFactor;
      term._calculateCharSize();
      term._resizeCanvas();
      term.render();
    }
  });
</script>

<style>
  #debug-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    padding: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
    border-top: 1px solid #7f8c8d;
  }
  .debug-control {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .debug-control label {
    font-size: 12px;
    color: #ecf0f1;
  }
  .debug-control input {
    width: 60px;
    padding: 3px;
    background-color: #34495e;
    border: 1px solid #7f8c8d;
    color: #ecf0f1;
  }
  #apply-debug {
    padding: 5px 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  #apply-debug:hover {
    background-color: #2980b9;
  }
</style>
</body>
</html>